<template>
  <div class="p-d">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card">
          <div class="borderStyle">分类维度</div>
          <div class="m-t">
            <div v-for="(item,index) in arr" :key="index" :class="idIndex==item.id?'divStyle divActive':'divStyle'" @click="activeFun(item)">
              {{ item.name }}</div>
            <el-button type="primary" size="mini" class="btnStyle" @click="addFun">+ 新建维度</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <div class="borderStyle">{{ nameUse }}</div>
          <div class="m-t"> <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
              <div class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave()">
                <div class="flex-between">
                  <span>{{ node.label }}</span>
                  <span v-if="idMouseIndex == data.id">
                    <el-button type="text" size="mini" @click="() => appendFun(data)">
                      添加同级
                    </el-button>
                    <el-button type="text" size="mini" @click="() => appendChildren(data)">
                      添加子级
                    </el-button>
                    <el-button type="text" size="mini" @click="() => editFun(node, data)" style="margin-right: 15px;">
                      编辑
                    </el-button>
                    <el-link type="danger" size="mini" @click="() => removeFun(node, data)">
                      删除
                    </el-link>
                  </span>
                </div>
              </div>
            </el-tree></div>
        </el-card></el-col>
    </el-row>
    <Add ref="addRef" @close="initData" />
    <AddCatalogue ref="addCatalogueRef" @close="initData" />
  </div>
</template>

<script>
import { getDimensionsAll } from "@/api/dimensions"
import { getAll } from "@/api/directory"
import Add from "./common/add.vue"
import AddCatalogue from "./common/addCatalogue.vue"
export default {
  components: {
    Add,
    AddCatalogue
  },
  data() {
    return {
      arr: [
      ],
      idIndex: -1,
      treeData: [],
      nameUse: '按类别维度',
      idMouseIndex: -1,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getDimensionsAll({}).then((res) => {
        this.arr = res.data || [];
        this.idIndex = this.arr[0].id;
        this.changeFun()
      })

    },
    changeFun() {
      getAll({
        "queryString": {
          "dimensionsId": this.idIndex
        }
      }).then((res) => {
        this.treeData = res.data || []
      })
    },
    activeFun(item) {
      this.idIndex = item.id;
      this.nameUse = item.name;
      this.changeFun()
    },
    addFun() {
      this.$refs.addRef.show({ title: "新建维度" })
    },
    appendFun(data) {
      let isShowParent = false
      if (data.parentId != 0) {
        isShowParent = true
      }
      console.log('%c [  ]-96', 'font-size:13px; background:pink; color:#bf2c9f;', data)
      this.$refs.addCatalogueRef.show({ title: "新建同级类别", arr: this.arr, isShowParent, idIndex: this.idIndex, id: data.parentId, treeData: this.treeData })
    },
    editFun() {

    },
    appendChildren(node) {
      this.$refs.addCatalogueRef.show({ title: "新建同级类别", arr: this.arr, data: node })
    },
    mouseenter(node) {
      this.idMouseIndex = node.id;
    },
    mouseleave() {
      this.idMouseIndex = -1;
    },
    removeFun() {
      this.$confirm(`确定要删除吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // deleteFun({ ids: [row.id] }).then(() => {
          //   this.initData();
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    }
  }
}
</script>

<style lang="scss" scoped>
  .picStyle {
    background-color: #fff;
    height: 95vh;
    // margin-top: 153px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .developStyle {
    width: 422px;
    height: 241px;
    background: url('~@/assets/img/develop.png') no-repeat center;
    background-size: 422px 241px;
  }
  .textStyle {
    color: #868b8f;
    text-align: center;
  }
  .borderStyle {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  .divStyle {
    text-align: center;
    font-size: 14px;
    padding: 15px;
    cursor: pointer;
  }
  .divStyle:hover {
    background: #0965ea !important;
    // color: #333;
  }
  .divActive {
    background: #0757b4;
    color: #fff;
    border-radius: 4px;
  }
  :deep(.el-card__body) {
    height: 90vh;
    position: relative;
  }
  .btnStyle {
    position: absolute;
    bottom: 30px;
    background: #0757b4;
    border-color: #0757b4;
    left: 50%;
    transform: translateX(-50%);
  }
  .custom-tree-node {
    width: 100%;
  }
</style>